import React from 'react';

import {
  ExclamationCircleFilled, //info warning
  CheckCircleFilled, //success
  CloseCircleFilled, //danger
} from '@ant-design/icons';

import styles from './index.less';

type MessageType = 'info' | 'success' | 'danger' | 'warning';

interface MessageProps {
  text: string;
  type: MessageType;
}
const Message: React.FC<MessageProps> = (props: MessageProps) => {
  const { text, type } = props;
  const renderIcon = (messageType: MessageType): React.ReactElement => {
    let reactDom: React.ReactElement;
    switch (messageType) {
      case 'success':
        reactDom = <CheckCircleFilled style={{ color: '#52c41a' }} />;
        break;
      case 'danger':
        reactDom = <CloseCircleFilled style={{ color: '#ff4d4f' }} />;
        break;
      case 'warning':
        reactDom = <ExclamationCircleFilled style={{ color: '#faad14' }} />;
        break;
      case 'info':
      default:
        reactDom = <ExclamationCircleFilled style={{ color: '#1890ff' }} />;
        break;
    }

    return reactDom;
  };
  return (
    <div className={styles.message} data-testid="test-message">
      <div className={styles.messageContent}>
        <div className={styles.icon}>{renderIcon(type)}</div>
        <div className={styles.text}>{text}</div>
      </div>
    </div>
  );
};

export default Message;
